/*
  学习目标：ref -react 中获取 dom对象 - 与 vue 类似
  步骤：
    1. 调用`React.createRef()`方法创建一个` ref` 对象
    2. 将创建好的`ref对象`绑定到`dom`元素上
    3. 通过 `ref对象.current`获取`dom`元素

     vue3 
     1. const divDom = ref(null)
     2. 页面上通过 ref 属性绑定 <div ref="divDom">
     3. 绑定完成后，可以通过 divDom 去获取具体的dom元素
*/

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  // 1. 调用`React.createRef()`方法创建一个` ref` 对象
  divRef = React.createRef();
  childRef = React.createRef();

  // 3. 通过 `ref 对象`获取`dom`元素
  getRef = () => {
    console.log('divRef -----> ', this.divRef.current);
    this.divRef.current.innerHTML = '我修改了div的innerHTML';
  };

  getChildRef = () => {
    console.log('getChildRef-----> ', this.childRef.current);
    this.childRef.current.handleChange();
  };
  render() {
    return (
      // 2. 将创建好的`ref对象`绑定到`dom`元素上
      <div>
        <div ref={this.divRef}>我是app</div>
        <button onClick={this.getRef}>点我获取divRef和修改</button>

        <Child ref={this.childRef}></Child>
        <button onClick={this.getChildRef}>点我获取childRef和修改</button>
      </div>
    );
  }
}

class Child extends React.Component {
  state = { msg: 123 };
  handleChange = () => {
    this.setState({ msg: 456 });
  };
  render() {
    return <div>我是child - {this.state.msg}</div>;
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
